<template>
	<view class="driver-info-container">
		<!-- 头部信息 -->
		<view class="header" :style="{ marginTop: statusBarHeight + 'px' }">
			<view class="avatar-container">
				<image 
					:src="getCurrentDriverAvatarOrDefault()"
					mode="aspectFill"
					class="avatar" 
					@tap="previewAvatar"
				></image>
			</view>
			<text class="name" v-if="driver.getCurrentDriver().surname">
				{{ driver.getCurrentDriver().surname + driver.getCurrentDriver().name }}
			</text>
		</view>

		<!-- 个人信息表单 -->
		<view class="form-container">
			<!--姓名-->
			<view class="info-item" >
				<text class="label">姓名</text>
				<view class="value-container">
					<text class="value">{{ driver.getCurrentDriver().surname + driver.getCurrentDriver().name || '待认证' }}</text>
					<uni-icons type="forward" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<!--性别-->
			<view class="info-item">
				<text class="label">性别</text>
				<view class="value-container">
					<text class="value">
						{{ driver.getCurrentDriver().sex === null ? '待认证' : getGenderNameByCode(driver.getCurrentDriver().sex) }}
					</text>
					<uni-icons type="forward" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<!--手机号-->
			<view class="info-item">
				<text class="label">手机号</text>
				<view class="value-container">
					<text class="value">{{ driver.getCurrentDriver().phone || '未设置手机号' }}</text>
					<uni-icons type="forward" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<!--身份证号-->
			<view class="info-item">
				<text class="label">身份证号</text>
				<view class="value-container">
					<text class="value">{{ driver.getCurrentDriver().idCard || '待认证' }}</text>
					<uni-icons type="forward" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<!--驾龄-->
			<view class="info-item">
				<text class="label">驾龄</text>
				<view class="value-container">
					<text class="value">
						{{ driver.getCurrentDriver().driverAge ? `${driver.getCurrentDriver().driverAge}年` : '待认证' }}
					</text>
					<uni-icons type="forward" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<!--准驾车型-->
			<view class="info-item">
				<text class="label">准驾车型</text>
				<view class="value-container">
					<text class="value">
						{{ driver.getCurrentDriver().driverCarType === null ? '待认证' : getDriverCarNameByCode(driver.getCurrentDriver().driverCarType) }}
					</text>
					<uni-icons type="forward" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<!--银行卡号-->
			<view class="info-item">
				<text class="label">银行卡号</text>
				<view class="value-container">
					<text class="value">
						{{ driver.getCurrentDriver().bankCardId || '待认证' }}
					</text>
					<uni-icons type="forward" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<!--账户余额-->
			<view class="info-item" v-if="driver.getCurrentDriver().auditStatus === auditStatusEnum.PASS.value">
				<text class="label">账户余额</text>
				<view class="value-container">
					<text class="value">
						{{ formatAmount(driver.getCurrentDriver().accountBalance) }}元
					</text>
					<uni-icons type="forward" size="16" color="#999"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="btn-container">
			<view class="btn edit-btn" @tap="gotoReviewListPage">查看认证记录</view>
			<view class="btn logoff-btn" @tap="handleLogoff">注销账号</view>
			<view class="btn logout-btn" @click="logout">退出登录</view>
		</view>

	</view>
</template>

<script setup>
import { onUnmounted, ref } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/userStore.js'
import { logoff } from '@/api/user.js'
import { getGenderNameByCode, getDriverCarNameByCode, auditStatusEnum } from '@/utils/enums.js'
import { formatAmount } from '@/utils/amountUtil.js'
import { getCurrentDriverAvatarOrDefault } from '@/utils/imageUtil.js'
import { removeToken } from '@/utils/auth'

const driver = useUserStore()

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight

// 预览头像
function previewAvatar () {
	uni.previewImage({
		urls: [getCurrentDriverAvatarOrDefault()],
		current: 0
	})
}

// 更换头像
function changeAvatar () {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			const tempFilePaths = res.tempFilePaths
		}
	})
}

function gotoReviewListPage () {
	uni.navigateTo({
		url: '/pages/mine/review-list'
	})
}

// 退出登录
function logout () {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				driver.resetCurrentDriver()
				removeToken()
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		}
	})
}

// 注销账号
// 携带token的注销，正式环境用=====================================================================
function handleLogoff () {
	let countdown = 3; 
		
	uni.showToast({
		title: `注销确认中...`,
		icon: 'none',
		duration: countdown * 1000
	})
	
	const timer = setInterval(() => {
		countdown--;
		if (countdown <= 0) {
			clearInterval(timer);
			// 倒计时结束后显示确认弹窗
			uni.showModal({
				title: '确定要注销此账号吗',
				content: '注销后，账户数据将永久删除，此操作不可撤销！',
				showCancel: true,
				confirmText: '确定注销',
				confirmColor: '#F53F3F',
				cancelText: '再想想',
				success: (res) => {
					if (res.confirm) {
						logoff().then(() => {
							driver.resetCurrentDriver();
							removeToken();
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}).catch(err => {
							console.log('注销错误:', err)
							uni.showToast({
								title: err.msg || '注销失败',
								icon: 'none'
							})
						})
					}
				}
			})
		}
	}, 1000)
}

// 携带司机ID的注销，测试环境用
// function handleLogoff () {
//   let countdown = 3; 
      
//   uni.showToast({
//     title: `注销确认中...`,
//     icon: 'none',
//     duration: countdown * 1000
//   })
  
//   const timer = setInterval(() => {
//     countdown--;
//     if (countdown <= 0) {
//       clearInterval(timer);
//       uni.showModal({
//         title: '确定要注销此账号吗',
//         content: '注销后，账户数据将永久删除，此操作不可撤销！',
//         showCancel: true,
//         confirmText: '确定注销',
//         confirmColor: '#F53F3F',
//         cancelText: '再想想',
//         success: (res) => {
//           if (res.confirm) {
//             // 传递当前司机id
//             logoff(driver.getCurrentDriver().id).then(() => { 
//               driver.resetCurrentDriver();
//               removeToken();
//               uni.reLaunch({
//                 url: '/pages/index/index'
//               })
//             }).catch(err => {
//               console.log('注销错误:', err)
//               uni.showToast({
//                 title: err.msg || '注销失败',
//                 icon: 'none'
//               })
//             })
//           }
//         }
//       })
//     }
//   }, 1000)
// }
// ================================================================================================

onPullDownRefresh(() => {
	driver.refreshCurrentDriver().then(res => {
		uni.showToast({
			icon: 'none',
			title: '刷新成功'
		})
	}).finally(() => {
		uni.stopPullDownRefresh()
	})
})
</script>

<style lang="scss">
view {
	box-sizing: border-box;
}
.driver-info-container {
	padding: 20rpx;
	min-height: 100vh;
	
	background: // 上面的层级更高
		linear-gradient(to bottom, transparent, #f8f8f8 430rpx), // 从上到下，由透明色变为白色
		linear-gradient(to right, #44c0ec 20%, #dbf4db);      // 从左到右

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;
		margin-bottom: 20rpx;

		.avatar-container {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 20rpx;

			.avatar {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				border: 4rpx solid #fff;
			}
		}

		.name {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.form-container {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.label {
				font-size: 30rpx;
				color: #333;
			}

			.value-container {
				display: flex;
				align-items: center;

				.value {
					font-size: 28rpx;
					color: #666;
					margin-right: 10rpx;
				}
			}
		}
	}

	.btn-container {
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;

		.btn {
			color: #333;
			border-radius: 20rpx;
			height: 90rpx;
			width: 100%;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		}

		.edit-btn {
			background-color: #fff;
			margin-bottom: 30rpx;
		}
		
		.logoff-btn {
			background-color: #fff;
			margin-bottom: 30rpx;
		}

		.logout-btn {
			background-color: #fff;
			color: #999;
		}
	}
}
</style>